<template>
  <div class="ttt" :style="styleObj">
    <p>{{title}}{{num}}333</p>
  </div>
</template>

<script>
import {ref} from "vue";

export default {
    name: __NAME__,
    props: {
      title: {
        type: String,
        default: '666'
      },
      styleObj: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    setup() {
      const num = ref(0)
      function click() {
        num.value++
        console.log(num.value)
      }

      /**
       * 默认渲染方法。当组件被初始化后，组件渲染逻辑被调用，入参为数据。
       * 需要能够支持重渲染，即保证同样的数据输入，能够渲染出同样的效果。
       * @param {Array} data 数组
       */
      function render(data){

      }
      /**
       * 更新组件配置，接收的入参config是修改后的新配置
       * @param {Object} config 配置
       */
      function updateOptions(config){

      }
      /**
       * 缩放，当组件被拖拽、缩放时被调用。
       * @param {Number} width 宽
       * @param {Number} height 高
       */
      function resize(width,height){

      }

      return{
        num,
        click
      }
    }
  }
</script>
